<template>
    <el-container>
        <div class="bgBox">
            <img class="bg" src="./bg2.png"/>
        </div>
        <div class="mian">
            <el-row>
                <el-col :span="24">
                    <div class="login-wrapper">
                        <p>测试后台登录系统</p>
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                            <el-form-item prop="userName">
                                <div class="loginInput" :class="{loginFocus:focusInputUser}">
                                    <img src="./userName.png" />
                                    <el-input type="text" placeholder="请输入手机号" v-model="ruleForm.userName" @focus="focusUser" @blur="blurUser"></el-input>
                                </div>
                            </el-form-item>
                            <el-form-item prop="passWord" class="passWord" >
                                <div class="loginInput" :class="{loginFocus:focusInputPass}">
                                    <img src="./pass.png" />
                                    <el-input type="password" placeholder="密码" v-model="ruleForm.passWord" auto-complete="off" @focus="focusInput" @blur="blurInput"  @keyup.enter.native="login('ruleForm')"></el-input>
                                </div>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" size="small" @click="login('ruleForm')" class="login-btn" :loading="BBth">登录</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
                <el-col :span="4">&nbsp;</el-col>
            </el-row>
            <div class="footer">南京橙红科技股份有限公司 版权所有©(2011-2016） 苏ICP备10229471号-5 <br>版本号：{{version}}</div>


        </div>
        <el-footer></el-footer>
    </el-container>
</template>

<script>
    export default {
        data() {
            return {
                version:this.packageJson['agri-version'],
                focusInputPass:false,
                focusInputUser:false,
                checked:false,
                hasPass:'',
                BBth:false,
                ruleForm:{
                    userName:'',
                    passWord:''
                },
                rules:{
                    userName:[{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }],
                    passWord:[{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }]
                }
            }
        },
        mounted(){
            this.getUserName()
        },
        methods:{
            focusInput(){
                this.focusInputPass = true
            },
            blurInput(){
                this.focusInputPass = false
            },
            focusUser(){
                this.focusInputUser = true
            },
            blurUser(){
                this.focusInputUser = false
            },
            getUserName:function(){
                if(this.$cookie.get('userName')){
                    this.ruleForm.userName = this.$cookie.get('userName')
                }
            },
            login: async function(formName){
                this.$refs[formName].validate( async (valid) => {
                    if (valid) {
                        this.BBth=true;
                        const params = {
                            "phone":this.ruleForm.userName,
                            "password":this.ruleForm.passWord
                        }
                        const res = await this.http.post(this.api.Login, params);
                        this.BBth=false;
                        if(res.code == 401){
                            this.$message.error(res.message);
                        }
                        else if(res.code == 200){
                            this.$cookie.set('userName', this.ruleForm.userName, 2*60*60)
                            this.$cookie.set('token_back', res.data.token, 2*60*60)
                            this.$router.push({
                                path: '/home/homePage'
                            })
                        }
                    }else {
                        this.$message.error('请正确填写用户名和密码');
                        return false;
                    }
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .title-wrapper{
        height: 130px;
        .title{
            margin-top: 70px;
            img{
                width: 220px;
                vertical-align: middle;
            }
            .line{
                margin: 0 5px;
            }
            span{
                vertical-align: middle;
                color: #409EFF;
            }
        }
    }
    .el-main{
        padding: 0;
        /*background: url('login.png') no-repeat center;*/
        /*background: url('./bg2.png') no-repeat center;*/
        /*-webkit-background-size: cover;*/
        /*background-size: cover;*/
        background: #fff;
    }
    .el-container.is-vertical{
        min-width: 1150px;
        min-height: 900px;
        position: relative;
        overflow: hidden;
    }
    .bgBox{
        width: 1920px;
        position: absolute;
        left: 50%;
        top: 0;
        margin-left: -960px;
        overflow: hidden;
        img{
            display: block;

        }
    }
    .el-form-item{
        margin-bottom: 30px;
    }

    .login-wrapper{

        width: 461px;
        height: 356px;
        background: rgba(255,255,255,0.9);
        /*padding: 30px 25px;*/
        /*padding:40px 60px 44px 60px;*/
        padding: 40px 40px 0 40px;
        margin: 0 auto;
        margin-top: 206px;

        p{
            margin-bottom: 35px;
            font-size: 24px;
            line-height: 28px;
            color: #3788F0;
            text-align: center;
        }
        .el-checkbox{
            display: block;
        }
        .passWord{
            margin-bottom: 50px;
        }
        .login-btn{
            display: block;
            width: 172px;
            height: 42px;
            /*margin-top: 20px;*/
            background:linear-gradient(180deg,rgba(55,136,240,1),rgba(85,154,243,1));
            border-radius: 22px;
            font-size: 16px;
            box-shadow: 0px 1px 3px 2px RGBA(55, 136, 240, 0.5);
            margin: 0 auto;
        }
    }
    .footer{
        text-align: center;
        line-height: 60px;
        padding-top: 190px;
    }
    .loginInput{
        border-bottom: 1px solid #E7E7E7;
        img{
            display: inline-block;
            vertical-align: middle;
        }
    }

    .savePassWord .el-checkbox{
        display: inline-block;

        margin-right: 12px;
    }
    /deep/.loginInput .el-input{
        margin: 10px 0;
        background: none;
        outline: none;
        border: 0px;
        display: inline-block;
        width: 93%;
        font-size: 16px;
        .el-input__inner{
            background: none;
            outline: none;
            border:0;
            -webkit-tap-highlight-color:rgba(255,0,0,0);

        }
    }
    /deep/.savePassWord .el-form-item__content{
        margin-top: 32px;
        font-size: 16px;
        color: #666666;
    }
    .loginFocus{
        border-color: #3678EB;
    }
</style>
